<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">
			<!-- #ifndef H5 -->
			<view class="icon" @click="onCode">
				<text class="iconfont icon-saoyisao"></text>
			</view>
			<!-- #endif -->
			<!-- #ifdef  H5 -->
			<!-- 	<view class="icon" @click="onPayCode">
				<text class="iconfont icon-fukuanma"></text>
			</view> -->
			<!-- #endif -->
			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="输入搜索内容" />
			</view>
			<!-- <view class="icon">
				<text class="iconfont icon-xiaoxi"></text>
			</view> -->
		</view>
		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">
			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">
					<!-- <view class="list action">
						<text>推荐分类</text>
					</view> -->
					<view class="list" v-for="(item,index) in category" :key="index">
					
						<text @tap="showChild(item.childlist,item.name,index)"
							:class="index==current?'current-color':''">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="classify-two-three">
				<scroll-view scroll-y class="scroll">
					<view class="classify-two">
						<view class="two-name">
							<view class="name">{{categoryname}}</view>
						</view>
						<view class="classify-three">
							<view class="list" v-for="(item,index) in childCategory" :key="index" @tap="productList(item.id,item.name)">
								<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<!-- <TabBar :tabBarShow="1"></TabBar> -->
	<tabBar></tabBar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import tabBar from "@/newsPage/components/tabBar/index.vue"
	
	import shop from '@/api/shop';
	// import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				current: 0,
				height: 0,
				category: [],
				childCategory: [],
				categoryname: ''
			};
		},
		onReady() {
			// setTimeout(()=>{
			//   uni.hideTabBar()  
			// },100)
			let info = uni.createSelectorQuery().select(".page");
			info.boundingClientRect((data) => { //data - 各种参数
				console.log(data.height);
				this.height = data.height - 100;
				// #ifdef APP-PLUS 
				this.height = data.height - 130;
				// #endif 

			}).exec()


		},
		onLoad() {
			this.getCategory()
		},
		methods: {
			showChild(item, name, index) {
				this.childCategory = item
				this.categoryname = name
				this.current = index
			},
			getCategory() {
				shop.getCategory().then(res => {
					console.log(res)
					this.category = res.data.categoryModules
					this.childCategory = this.category[0].childlist
					this.categoryname = this.category[0].name
					uni.hideLoading();
				})
			},
			productList(category_id, category_name) {
				
				// #ifdef APP-PLUS
				plus.runtime.openURL(`https://www.yycjkb.cn/dist/#/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`)
				// #endif
				
				// #ifdef H5
				location.href = `https://www.yycjkb.cn/dist/#/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`
				// #endif
				
			},
			/**
			 * 扫一扫点击
			 */
			onCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			/**
			 * 付款码点击
			 */
			onPayCode() {
				uni.navigateTo({
					url: '/pages/PaymentCode/PaymentCode'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'classify.scss'
</style>

<style>
	.current-color {
		color: #000;
		background-color: #fcb735;
		padding:2px;
	}
</style>